<template>
  <div class="menu">
    <div class="menu-header flex items-center justify-center">
      <div class="menu-header-img mr-8px"><img :src="logo" alt="" /></div>
      <div class="menu-header-word"><img :src="word" alt="" /></div>
    </div>
    <div class="menu-content">
      <div
        v-for="item in menuItem"
        :key="item.name"
        class="flex relative h-54px items-center justify-center cursor-pointer"
        :class="{ 'item-active': item.active }"
        @click="toggle(item)"
      >
        <div v-if="item.active" class="absolute w-2px h-38px left-0 top-8px bg-main"></div>
        <div class="w-22px h-22px mr-8px"><img :src="item.icon" alt="" /></div>
        <div class="item-content">{{ item.name }}</div>
      </div>
    </div>
    <div
      class="shake w-148px h-60px flex flex-col items-center fixed bottom-40px cursor-pointer"
      @click="callFront"
    >
      <svg
        t="1670726985246"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2791"
        width="60"
        height="60"
      >
        <path
          d="M593.861938 788.582269 424.670537 788.582269c-9.444093 0-18.437931 3.931542-24.695448 10.902304-6.313799 6.970762-9.441023 16.32378-8.547677 25.675776 2.860141 29.191856 16.32378 56.238862 38.009685 76.018348 21.772886 20.016893 50.161447 31.0379 79.889515 31.0379 29.696346 0 58.084906-11.022031 79.830163-30.977525 21.714558-19.839861 35.178197-46.885843 38.068014-76.255755 0.595564-9.473769-2.534729-18.707061-8.638751-25.498744C612.299869 792.513812 603.306031 788.582269 593.861938 788.582269zM555.020304 863.825974c-25.082258 22.877033-66.604954 22.817682-91.567485 0.060375-7.596002-6.970762-13.404288-15.429411-17.157775-24.723078l125.82266 0C568.394916 848.51629 562.643935 856.914564 555.020304 863.825974z"
          p-id="2792"
          fill="#4979ff"
        ></path>
        <path
          d="M818.608631 648.343271l-62.763462-82.927711 0-36.22197 0-13.046131L755.845169 410.432767c0-70.745251-24.215518-136.337131-68.182892-184.682209-26.003234-28.625968-57.310264-49.715285-93.055372-62.821791-3.306302-18.944468-12.720719-36.251645-26.926256-49.207725-32.050973-29.251208-85.104283-29.251208-117.095905 0-14.356986 13.046131-23.77038 30.382984-26.986631 49.2681-35.71441 13.046131-67.022463 34.135448-93.025697 62.791092-43.937698 48.434106-68.183915 114.025986-68.183915 184.652534l0.179079 154.686035-62.315254 82.45085c-8.757454 9.353019-13.582343 21.506826-13.582343 34.256198l0 40.331567c0 27.643594 22.460548 50.042743 50.042743 50.042743l544.812313 0c27.610848 0 50.011021-22.400173 50.011021-50.042743l0-40.331567C831.535035 669.075455 826.739822 656.921647 818.608631 648.343271zM535.776008 149.881612c-7.387247-0.655939-19.301602-1.906419-26.569122-1.906419-7.29822 0-19.689435 1.251503-27.048029 1.906419C494.578724 129.627313 526.542716 133.379777 535.776008 149.881612zM237.426992 722.156394l-0.119727-40.034808 62.315254-82.449827c8.698103-9.354042 13.524015-21.447475 13.524015-34.256198L313.146535 410.432767c0-58.056254 19.540032-111.553679 54.986335-150.634766 17.574261-19.361977 38.307468-34.374902 61.540611-44.681642 48.851615-21.745257 110.302175-21.745257 159.096485 0 23.321148 10.425444 43.99398 25.438369 61.538565 44.681642 35.449373 39.081087 54.958706 92.578512 54.958706 150.634766l0 105.715717 0 13.046131 0 36.22197c0 12.867052 4.825912 25.081235 12.95608 33.539884l62.791092 82.868359 0.508583 39.795355L237.426992 722.156394z"
          p-id="2793"
          fill="#4979ff"
        ></path>
      </svg>
      <span class="text-white font-20px font-medium">呼叫</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import logo from '../../assets/logo.svg'
import word from '../../assets/word.svg'
import Mall from '@renderer/assets/mall-icon.svg'
import GiveFee from '@renderer/assets/giveFee.svg'
import VipIndex from '@renderer/assets/vipIndex.svg'
import ContactIndex from '@renderer/assets/contactIndex.svg'
import { useRouter } from 'vue-router'
import { useLocalHttp } from '@renderer/utils/http'
import { useMessage } from 'naive-ui'
import { useContextStore } from '@renderer/store/modules/context'
import { transformNo } from '@renderer/utils/http'
import _ from 'lodash'
const contextStore = useContextStore()
const router = useRouter()
const message = useMessage()
const menuItem = reactive([
  {
    name: '云游商城',
    icon: Mall,
    id: 1,
    active: true,
    path: '/'
  },
  {
    name: '充送活动',
    icon: GiveFee,
    id: 2,
    active: false,
    path: '/give'
  },
  // {
  //   name: '等级会员',
  //   icon: VipIndex,
  //   id: 3,
  //   active: false,
  //   path: '/user/vip'
  // },
  {
    name: '联系我们',
    icon: ContactIndex,
    id: 4,
    active: false,
    path: '/contact'
  }
])
const toggle = (item) => {
  menuItem.forEach((m) => (m.active = false))
  item.active = true
  router.replace(item.path)
}

const call = async () => {
  const { data: res } = await useLocalHttp('/env/call')
    .post({
      no: transformNo(contextStore.no),
      store_id: contextStore.store_id,
      store_name: contextStore.store_name
    })
    .json()
  if (res.value.code === 200) {
    message.info('呼叫成功，工作人员正快马加鞭赶过来，请稍等')
  } else {
    message.error(res.value.message)
  }
}

const callFront = _.throttle(call, 30000)
</script>

<style scoped>
.menu {
  width: 148px;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.7);
}
.menu-header {
  padding-top: 18px;
  padding-bottom: 18px;
}
.menu-header-img img {
  width: 28px;
  height: 28px;
  display: block;
}
.menu-header-word img {
  width: 78px;
  height: 19px;
  display: block;
}
.item-active {
  background: linear-gradient(270deg, rgba(73, 121, 255, 0.6) 0%, rgba(73, 121, 255, 0.2) 100%);
}
.item-active .item-content {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.item-content {
  font-weight: 400;
  font-size: 16px;
  color: #bdbdbd;
}
.shake {
  animation: shake 1000ms ease-in-out 10;
}
@keyframes shake {
  /* 垂直抖动，核心代码 */
  10%,
  90% {
    transform: translate3d(0, -1px, 0);
  }
  20%,
  80% {
    transform: translate3d(0, +2px, 0);
  }
  30%,
  70% {
    transform: translate3d(0, -4px, 0);
  }
  40%,
  60% {
    transform: translate3d(0, +4px, 0);
  }
  50% {
    transform: translate3d(0, -4px, 0);
  }
}
</style>
